<template>
  <div class="homepage">
    <router-view/>
    <div class="head">
      <router-link  to='city' class="city">{{city}}<img src="../assets/down.png"></router-link>
      <router-link class="search" to="search">
        <img src="../assets/search.png">
        <span>输入商家/品类/商圈</span>
      </router-link>
      <router-link class="mine" to="mine"><img src="../assets/mine.png">{{mine}}</router-link>
    </div>
    <div class="download">
      <a class="download1" href="imeituan://www.meituan.com/home/"></a>
      <a href="#" class="download2"></a>
    </div>
   <!-- <swiper :options="swiperOption" class="classify" ref="mySwiper">
       <ul class="classify1 swiper-slide swiper-slide-active">
         <li class="icon">
           <a href="#"  @click="clickFn()">
             <img src="../assets/cate.png">
             美食
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/cat.png">
             猫眼电影
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/hotel.png">
             酒店
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/recreation.png">
             休闲娱乐
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/takeout.png">
             外卖
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/ktv.png">
             KTV
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/travel.png">
             周边游
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/beauty.png">
             丽人
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/fastfood.png">
             小吃快餐
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/ticket.png">
             火车票
           </a>
         </li>
       </ul>
       <ul class="classify1 swiper-slide swiper-slide-active">
         <li class="icon">
           <a href="#">
             <img src="../assets/life.png">
             生活服务
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/form.png">
             今日新单
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/massage.png">
             足疗/按摩
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/dessert.png">
             甜点饮品
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/kids.png">
             母婴亲子
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/learning.png">
             学习培训
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/marry.png">
             结婚
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/home.png">
             家装
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/coupon.png">
             代金券
           </a>
         </li>
         <li class="icon">
           <a href="#">
             <img src="../assets/classify.png">
             全部分类
           </a>
         </li>
       </ul>
       <div class="swiper-pagination swiper-pagination-bullets">
       </div>
    </swiper>-->
    <swiper :options="swiperOption" class="classify" ref="mySwiper">
        <swiper-slide  class="swiper-slide games classify1">
          <ul>
          <li class="icon">
            <a href="#"  @click="clickFn()">
              <img src="../assets/cate.png">
              美食
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/cat.png">
              猫眼电影
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/hotel.png">
              酒店
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/recreation.png">
              休闲娱乐
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/takeout.png">
              外卖
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/ktv.png">
              KTV
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/travel.png">
              周边游
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/beauty.png">
              丽人
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/fastfood.png">
              小吃快餐
            </a>
          </li>
          <li class="icon">
            <a href="#">
              <img src="../assets/ticket.png">
              火车票
            </a>
          </li>
        </ul>
          </swiper-slide>
        <swiper-slide class="swiper-slide games classify1">
          <ul>
            <li class="icon">
              <a href="#">
                <img src="../assets/life.png">
                生活服务
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/form.png">
                今日新单
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/massage.png">
                足疗/按摩
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/dessert.png">
                甜点饮品
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/kids.png">
                母婴亲子
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/learning.png">
                学习培训
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/marry.png">
                结婚
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/home.png">
                家装
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/coupon.png">
                代金券
              </a>
            </li>
            <li class="icon">
              <a href="#">
                <img src="../assets/classify.png">
                全部分类
              </a>
            </li>
            </ul>
        </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>

    <div class="blank"></div>
    <div class="daogou">
      <div class="daogou1">
        <strong class="">我们约吧</strong>
        <small>恋人家人好朋友</small>
        <img src="../assets/daogou1.png">
      </div>
      <div class="daogou2">
        <strong class="">低价超值</strong>
        <small>十元惠生活</small>
        <img src="../assets/daogou2.jpg">
      </div>
      <div class="daogou3">
        <strong class="">午后时光</strong>
        <small>懒懒下午茶</small>
        <img src="../assets/daogou3.png">
      </div>
    </div>
    <div class="blank"></div>
    <div class="guessyoulike">
      <div class="word">猜你喜欢</div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">唐僧猪八戒孙悟空沙和尚白龙马</span>
          <span class="coupon">西天取经三打白骨精真假美猴王大闹天宫金箍棒</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods" >
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">肯德基</span>
          <span class="coupon">[西安等]20元代金券1张，可叠加</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">肯德基</span>
          <span class="coupon">[西安等]20元代金券1张，可叠加</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">肯德基</span>
          <span class="coupon">[西安等]20元代金券1张，可叠加</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">肯德基</span>
          <span class="coupon">[西安等]20元代金券1张，可叠加</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">肯德基</span>
          <span class="coupon">[西安等]20元代金券1张，可叠加</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
      <div class="goods">
        <img src="../assets/kfc.jpg">
        <div class="information">
          <span class="name">肯德基</span>
          <span class="coupon">[西安等]20元代金券1张，可叠加</span>
          <div class="price">
            <div>
              <span class="price1">19元</span>
              <span class="price2">门市价:31元</span>
            </div>
            <span class="price3">已售26458</span>
          </div>
        </div>
      </div>
    </div>
    <div class="viewmore">
      <a>查看全部团购<img src="../assets/next.png"></a>
    </div>
    <div class="footer">
      <div class="footer-bar">
        <button class="login" @click="login">登录</button>
        <button class="register" @click="register">注册</button>
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;城市:</span>
        <button class="location" @click="citys">西安</button>
      </div>
      <ul class="footer-nav">
        <li>
          <a class="react" @click="homepage">首页</a>
        </li>
        <li>|</li>
        <li><a class="react" @click="login">我的</a>
        </li>
        <li>|</li>
        <li><a class="react"  href="//i.meituan.com/client" data-source="(direct)">美团下载</a>
        </li>
        <li>|</li>
        <li><a class="react" href="//www.meituan.com?pcstyle=1">电脑版</a>
        </li>
        <li>|</li>
        <li><a class="react"  @click="helps">帮助</a>
        </li>
      </ul>
      <div class="footer-links">友情链接：
        <a href="//m.maoyan.com/?channel=touch_group">猫眼电影</a>
        <a  href="//m.dianping.com">大众点评</a>
        <a href="https://i.meituan.com/awp/hfe/hotel-fe-itower_awp/journey/guide-download/index.html?refer_source=yqlj">美团旅行</a>
        <a href="//i.zhenguo.com" class="linkminsu">榛果民宿</a>
        <a href="//evt.dianping.com/synthesislink/9496.html">大众点评下载</a>
        <a href="https://xue.meituan.com/?from=mt0" class="linkschool">美团点评餐饮学院</a>
        <a href="https://i.meituan.com/awp/hfe/block/6c4bec785dce/11188/index.html">快驴进货商家合作</a>
      </div>
      <div class="footer-copyright">
        <div class="hr"></div>
        <span class="footer-copyright-text">©2018 美团网 <a href="http://www.miibeian.gov.cn/" target="_blank" rel="nofollow">京ICP证070791号</a></span>
      </div>
    </div>
  </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'index',
  components: {
    swiper,
    swiperSlide
  },
  data () {
    return {
      swiperOption: {
        loop: false,
        grabCursor: true,
        autoHeight: true,
        scrollbar: '.swiper-scrollbar',
        mousewheelControl: true,
        observeParents: true,

        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      },
      computed: {
        swiper () {
          return this.$refs.mySwiper.swiper
        }
      },
      selectcity: {
        route: '/city'
      },
      city: '西安',
      mine: '我的',
      clickFn: function () {
        this.$router.push('/cate')
      },
      listData: [
        {
          url: '',
          name: ''
        }
      ]
    }
  },
  methods: {
    stopPlay () {
      this.mySwiper.stopAutoplay()
    },
    goPage () {
      console.log('跳转我的界面')
    },
    selectCity () {
      console.log('111')
    },
    login () {
      this.$router.push('mine')
    },
    register () {
      this.$router.push('login')
    },
    citys () {
      this.$router.push('city')
    },
    homepage () {
      this.$router.push('/')
    },
    helps () {
      this.$router.push('help')
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  .homepage{
    width: 6.4rem;
    overflow: hidden;
    word-break: break-all;
    word-wrap: break-word;
    margin: 0 auto;
  }
  .head{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-content: center;
    margin: 0 ;
    padding: 0;
    width: 100%;
    height: 1rem;
    background-color: #06c1ae;
    border-bottom:1px solid #21897d;
    .city{
      width: 1.2rem;
      padding:  0 0 0 .2rem;
      font-size: 0.25rem;
      text-align:center;/*水平居中*/
      overflow: hidden;
      line-height: 1rem;
      color: #fff;
      display: flex;
      justify-content: center;
      img{
        display: block;
        width: .2rem;
        height: .2rem;
        margin: auto 0 auto 0.15rem ;
      }
    }
    .search{
      display: flex;
      justify-content: flex-start;
      width: 4rem;
      height: .5rem;
      margin:auto 0;
      border-radius: .1rem;
      font-size: .25rem;
      line-height: .5rem;
      color: #58d2c5;
      background-color: #05a494;
      border:.005rem solid  azure;
      img{
        width: .3rem;
        height: .3rem;
        margin: .12rem .1rem;
        font-size: .5rem;
        color: #fff;
      }
    }
    .mine{
      width: .5rem;
      padding: 0 0.2rem;
      font-size: 0.15rem;
      text-align:center;/*水平居中*/
      overflow: hidden;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      img{
        display: block;
        width: .4rem;
        height: .35rem;
        margin-left: .05rem;
      }
    }
  }
  .download{
    height: 2rem;
    margin: 0 auto;
    background-image: url("../assets/downloadbg.png");
    background-repeat: no-repeat;
    background-size:100% 100%;
    position: relative;
    .download1{
      width: 2rem;
      height: .7rem;
      position: absolute;
      left:1.1rem;
      bottom: .2rem;
    }
    .download2{
      width: 2rem;
      height: .7rem;
      position: absolute;
      right:1.1rem;
      bottom: .2rem;
    }
  }
  .classify{
    width: 6.4rem;
    height: 3.6rem;
    border-top: 1px solid #f0efed;
    .classify1{
      width: 6.4rem;
      height: 3.4rem;
      display: block;
      ul{
        height: 3.4rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-content: space-around;
        li{
          width: 1.1rem;
          height: 1.6rem;
          a{
            display: flex;
            flex-direction:column;
            align-items: center;
            justify-content: space-around;
            width: 1.1rem;
            height: 1.6rem;
            font-size: .1rem;
            color: #666;
            img{
              display: block;
              width: .9rem;
              height: .9rem;
            }
          }
        }
      }
    }

    .swiper-pagination{
      margin: 0 auto;
      position: absolute;
      bottom: -10px;
    }
  }
  .blank{
    width: 100%;
    margin: 0 auto;
    height: .4rem;
    background-color:#f0efed;
  }
  .daogou{
    width:100%;
    height: 2.5rem;
    display: flex;
    justify-content:center;
    flex-direction: row;
    margin: 0 auto;
    .daogou1,.daogou2,.daogou3{
      width: 2.1rem;
      height: 2.5rem;
      display: flex;
      flex-direction: column;
      align-content: flex-start;
      strong{
        font-size: .3rem;
        text-align: justify;
        color: #55a40f;
        margin: .1rem 0 0.18rem .2rem;
      }
      small{
        font-size: .24rem;
        text-align: justify;
        margin-left: .2rem;
        color: #666;
      }
      img{
        width: 1.8rem;
        height: 1.4rem;
        margin: 0 auto;
      }
    }
    .daogou2{
      border-left: 1px solid #f0efed;
      border-right: 1px solid #f0efed;
      strong{
        color: #ff3f0d;
      }
    }
    .daogou3 strong{
      color: #f742a0;
    }
  }
  .guessyoulike{
    width:6.4rem;
    margin: 0 auto;
    .word{
      font-size: .35rem;
      padding: .15rem .15rem .15rem .4rem;
    }
    .goods{
      width:6rem;
      display: flex;
      justify-content: flex-start;
      border-top: 1px solid #f0efed;
      padding: .2rem 0;
      margin: 0 0 0 .4rem;
      img{
        display: block;
        width: 1.8rem;
        height: 1.8rem;
      }
      .information{
        display: flex;
        flex-direction: column;
        margin-left: .2rem;
        .name{
          font-size: .35rem;
          color: black;
          width: 3.7rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .coupon{
          font-size: .2rem;
          color: black;
          margin: .2rem 0 .5rem 0;
          width: 3.7rem;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .price{
          height: .5rem;
          display: flex;
          justify-content:space-between;
          div{
            line-height: .5rem;
            align-items: center;
            display: flex;
            justify-content: flex-start;
            .price1{
              display: block;
              font-size: .35rem;
              color: #1cc7b5;
            }
            .price2{
              display: block;
              font-size: .1rem;
              color: #666;
              padding: .15rem .3rem .15rem .15rem;
            }
          }
          .price3{
            font-size: .25rem;
            color: #666;
          }
        }
      }
    }
  }
  .viewmore{
    width: 6.4rem;
    height: .8rem;
    margin: 0 auto;
    border-top: 1px solid #f0eee9;
    border-bottom: 2px solid #f0eee9;
    a{
      width: 6rem;
      padding: 0 .2rem;
      font-size: .32rem;
      color: #06c1ae;
      text-align: justify;
      line-height: .8rem;
      display: flex;
      justify-content: space-between;
      img{
        display: block;
        width: .4rem;
        height: .4rem;
        padding: .2rem 0;
      }
    }
  }
  .footer{
    height: 3.6rem;
    width: 6rem;
    margin: 0 auto;
    padding: .2rem;
    background-color: #f0efed;
    .footer-bar {
      font-size: .25rem;
      margin-bottom: .4rem;
      display: flex;
      justify-content: space-between;
      button{
        display: inline-block;
        width: 1.2rem;
        height: .6rem;
        border-radius: .06rem;
        font-size: .28rem;
        vertical-align: middle;
        line-height: .6rem;
        cursor: pointer;
        border: .02rem solid #06c1ae;
        padding: 0 .3rem;
        background: 0;
        color: #06c1ae;
      }
      .location{
        width: 1.8rem;
      }
      span{
        width: 1.2rem;
        text-align: center;
        line-height: .6rem;
        font-size: .3rem;
      }
    }
    .footer-nav{
      margin: 0;
      padding: .18rem 0;
      font-size: .22rem;
      display: flex;
      flex-direction:row;
      flex-wrap: nowrap;
      white-space: nowrap;
      justify-content: center;
      li{
        .line{
          color: black;
          line-height: 1.2rem;
        }
        a{
          display: block;
          height: 100%;
          overflow-x: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          padding: 0 .25rem;
          color: #06c1ae;
        }
      }
    }
    .footer-links{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      font-size: .24rem;
      margin: .3rem .2rem 0 .2rem;
      text-align: center;
      a{
        display: block;
        color: #06c1ae;
        font-size: .24rem;
        padding: 0 .2rem .1rem .3rem;
        text-align: center;
      }
      .linkminsu{
        margin: 0 0 0 .5rem;
      }
      .linkschool{
        margin: 0 0 0 .5rem;
      }
    }
    .footer-copyright {
      font-size: .05rem;
      text-align: center;
      position: relative;
      .hr {
        display: block;
        content: "";
        width: 100%;
        position: absolute;
        top: 50%;
        border-top: 1px solid #999;
        z-index: 2;
      }
      .footer-copyright-text {
        position: relative;
        width: 4rem;
        margin: 0 auto;
        color: #999;
        background-color: #f0efed;
        font-size: .05rem;
        display: flex;
        justify-content: center;
        z-index: 3;
        a{
          display: block;
          font-size: .05rem;
          color: #999;
        }
      }
    }
  }
</style>
